<!DOCTYPE html>

<html lang = "zh-CN">
    <head>
        <meta charset = "utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <title>index</title>

        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" href="img/logo.png">
    </head>

    <body>
        <header class="header">
        	<div class="nav-wrapper">
        		<div class="logo-wrapper">
        		    <a href="index.html">
        		        <img class="logo" alt="logo" src="img/logo.png">
        		    </a>
        		</div>

        		<nav class="nav">
        		    <ul>
        		    	<li> <a href="index.html">首页</a> </li>
        		    	<li> <a href="blog.html">文章</a> </li>
        		    	<li> <a href="gallery.html">作品</a> </li>
        		    	<li> <a href="about.html">关于</a> </li>
        		    </ul>
        		</nav>
        	</div>

        	
        	<a class="link-github" href="https://github.com">
        	    <img alt="link to github" src="img/icon-github.png">
        	</a>
        </header>

       	<div class="index-page">
       		<div class="banner">
       		    <img alt = "banner" src="img/banner-bg.jpg">
       		    <div class="description-wrapper">
       		    	<div class="description">
       		    	    <h1>明天的自己</h1>
       		            <p>你希望明天的自己像一道彩虹还是刚淋过雨 你想完成的那些憧憬比抱着回忆流泪有趣有意义。你希望明天的自己有微笑眼睛还是半梦半醒一直在原地那儿也不去也就永远看不到新的好风景。</p>
       		    	</div>
       		    </div>
       		</div>

          <div class="img-gallery clearfix">
              <figure class="img-wrapper">
                  <img class="img" src="img/post-1.png">
                  <figcaption class="description">
                      <p>百度EFE（Excellent FrontEnd）技术体系，前身是ECOM前端团队，后经过技术的发展，逐渐形成一套完善的前端技术体系。</p>
                  </figcaption>
              </figure>

              <figure class="img-wrapper">
                  <img class="img" src="img/post-2.png">
                  <figcaption class="description">
                      <p>在EFE，我们要求所有业务无关的技术产品必须开源。我们知道即使开源也可能没什么人会和你一起玩，但开源代表的是我们开放的态度，欢迎别人一起玩，欢迎大家用，更欢迎大家监督，这对我们自己也是一种鞭策。所以ECharts一开始就是开源的，而且是BSD协议，可以免费用在任何地方。相比之下，HighCharts商业使用是要收费的，这是越来越多的用户开始使用ECharts的原因之一。但是更重要的，ECharts能有今天的成绩，是因为林峰。</p>
                  </figcaption>
              </figure>

              <figure class="img-wrapper">
                  <img class="img" src="img/post-3.png">
                  <figcaption class="description">
                      <p>EFE技术体系现由多个遵循该技术体系的前端团队所组成。E(Excellent)代表我们追求卓越的技术态度。</p>
                  </figcaption>
              </figure>
          </div>

          <div class="station-master">
              <figure class="thumbnail">
                  <img class="img" alt="master-image" src="img/master.jpg">
                  <figcaption class="name-wrapper">
                      <span class="name">Hi, I'm wlbreath</span>
                  <figcaption>
              </figure>

              <p class="description">准程序员，Front End Programmer。写不出来长长的自我介绍呀。写不出来长长的自我介绍呀。写不出来长长的自我介绍呀。写不出来长长的自我介绍呀。写不出来长长的自我介绍呀。写不出来长长的自我介绍呀。写不出来长长的自我介绍呀。写不出来长长的自我介绍呀。写不出来长长的自我介绍呀。</p>
          </div>
       	</div>

       	<footer class="footer">
            <nav class="footer-nav">
                <ul>
                    <li> <a href="index.html">首页</a> </li>
                    <li> <a href="blog.html">文章</a> </li>
                    <li> <a href="gallery.html">作品</a> </li>
                    <li> <a href="about.html">关于</a> </li> 
                </ul>
            </nav>

            <div class="other-links">
                <dl class="link-category">
                    <dt class="link-name">学习资料</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                        </ul>
                    </dd>
                </dl>

                <dl class="link-category">
                    <dt class="link-name">友情链接</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                    </dd>
                </dl>

                <dl class="link-category">
                    <dt class="link-name">学习资料</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                        </ul>
                    </dd>
                </dl>

                <dl class="link-category">
                    <dt class="link-name">学习资料</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                        </ul>
                    </dd>
                </dl>

                <dl class="link-category">
                    <dt class="link-name">友情链接</dt>
                    <dd class="links">
                        <ul>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">Hover时样式</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                            <li class="link"><a href="index.html">LINK</a></li>
                        </ul>
                    </dd>
                </dl>
            </div>

            <div class="copy-right">
                <p class="description">版权信息</p>
                <a href="https://github.com">
                    <img alt="copy-right" src="img/icon-github.png">
                </a>
            </div>
       	</footer>
    </body>
</html>